<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="components-demo">
		  <button-counter></button-counter>
		  <button-counter></button-counter>
		  <button-counter></button-counter>
		  <component-a></component-a>
		</div>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 全局组件：Vue.component 定义，使用必须放在 Vue 实例的上面
			// 定义一个名为 button-counter 的新组件
			Vue.component('button-counter', {
				// data 必须是 function，用于区分与 Vue 实例中的data，
				 // 并且返回对象，如此才能实现组件的复用时，变量互不干扰；
				 // 即 实例变量和类变量
			  data: function () {
			    return {
			      count: 0
			    }
			  },
			  // template 只支持单根元素，推荐使用' ` `' 波浪号 来包裹
				// 需要多个层级时，用一个 <div></div> 包裹起来！
			  template: `<button v-on:click="count++">
							You clicked me {{ count }} times.
							</button>`
			})
			var ComponentA = {  data: function () {
			    return {
			      count: 0
			    }
			  },
			  // template 只支持单根元素，推荐使用' ` `' 波浪号 来包裹
				// 需要多个层级时，用一个 <div></div> 包裹起来！
			  template: `<button v-on:click="count++">
							You clicked me {{ count }} times.
							</button>`}
			let vm = new Vue({
				el: '#components-demo',
				data: {
					message: 'hello Vue!',
				},
				components: {
					// 局部组件
					'component-a': ComponentA,
				}
				
			})
		</script>
	</body>
</html>
